<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="/lib/prototype/prototype-1.4.0.min.js"></script>
<script type="text/javascript" src="../api/zebda.js"></script>
<script type="text/javascript" src="../api/common.js"></script>
<script type="text/javascript" src="../api/formvalidator.js"></script>

<style type="text/css" media="all">
    @import "basic.css";
</style>

<title>Zebda - Form validation examples</title>
</head>
<body>

<h1>Form validation examples using <a href="http://labs.cavorite.com/zebda/">Zebda</a></h1>

<h2>1. Inline validation + conditional rules</h2>
     <form id="frm1" z:display="inline" 
     z:beforeValidate="bef();" z:afterValidate="return after();">
        	<label>
        	<span class="text">list</span>
        	<select id="sel1" name="sel1"
  	        	z:required="true" z:required_message="Please select one value">
        		<option value="a">Value a</option>
        		<option value="b">Value b</option>
        		<option value="c">Value c</option>
        	</select>
        	</label>
        	<label>
        	<span class="text">list2</span>
        	<select id="sel2" multiple="multiple" name="sel2"
  	        	z:required="true" z:required_message="Please select one value">
        		<option value="a">Value a</option>
        		<option value="b">Value b</option>
        		<option value="c">Value c</option>
        	</select>
        	</label>
        	<label>
        	<span class="text">Text</span>
        	<input type="text" name="txt1" id="txt1" value="" 
        	        	z:required="true" z:required_message="This text is required"/>
			</label>
			
        	<fieldset >
				<legend>Type</legend>
				<label>A<input type="radio" name="rad1" value="a" /></label>
				<label>B<input type="radio" name="rad1" value="b" /></label>
				<label>C<input type="radio" name="rad1" value="c" /></label>
        	</fieldset>

        	<label>
        	<span class="text">Enable conditional</span>
        	<input type="checkbox" name="chk1" id="chk1" value="ok" />
			</label>
			<fieldset class="alt">
        	<label>
        	<span class="text">conditional</span>
        	<input type="text" name="txt2" id="txt2" value="" />
			</label>			
			</fieldset>
            <fieldset class="submit">
                <input class="submit" type="submit" value="Submit" />
            </fieldset>
        </form>
<p>
Conditional rules are defined in <code>beforeValidate</code>:
</p>

<pre>
	if ($F('chk1')){	//Checkbox is checked?
		txt = $('txt2');  //Text element
		cond = Rule.Conditions.required;
		condOptions = {};
		r = new Rule(txt, cond, condOptions, 'Conditional text is required');
		FormValidator.Element.addRule(txt,r);
	}
</pre>

<p>
The condition <code>cond</code> could be any function that takes one argument (the field value)
and returns <code>true</code> when the condition is satisfied.
</p>
        
<h2>2. <code>beforeValidate</code> and <code>afterValidate</code> functions</h2>
<p>
<code>beforeValidate</code> is called <em>always</em> before validation. 
</p>
<p>
<code>afterValidate</code> is called only when there are <em>no</em> validation errors;
the form is submited only when this function returns true.
</p>
<form id="frm2">
   	<label>
	     <span class="text">Name</span>
	     <input type="text" name="txt" id="frm2_txt1" value="" 
	     	z:required="true" z:required_message="Name is required" />
	</label>
   	<label>
	     <span class="text">Last Name</span>
	     <input type="text" name="txt" id="frm2_txt1" value="" 
	     	z:length="{min: 10}" z:length_message="Last name min. length is 10 chars" />
	</label>
     <fieldset class="submit">
	             <input class="submit" type="submit" value="Submit" />
        </fieldset>
</form>
<script type="text/javascript">


$('frm2').beforeValidate = function(){
	alert('form 2 beforeValidate');
};


$('frm2').afterValidate = function(){
	alert('form 2 afterValidate.' + 
	'The form is submited only when this function returns true (here, it returns false).');
	return false;
};


//Adds a rule when the checkbox (chk1) is checked
$('frm1').beforeValidate = function(){
	if ($F('chk1')){	//Checkbox is checked?
		txt = $('txt2');  //Text element
		cond = Rule.Conditions.required;
		condOptions = {};
		r = new Rule(txt, cond, condOptions, 'Conditional text is required');
		FormValidator.Element.addRule(txt,r);
	}
}

function after(){
	alert('ok');
	return false;
}

</script>

</body>
</html>